<script setup lang="js">
	import Titlebar from '@@/components/Titlebar/index.vue'
	import Menu from '@@/components/Menu/index.vue'

	//#region 导航栏设置

	// 是否展开导航栏
	const isCollapse = ref(false)

	// 导航栏的最小宽度
	const SideMinWidth = '64px'
	// 导航栏的最大宽度
	const SideMaxWidth = '200px'

	// 导航栏的宽度
	const SideWidth = ref(SideMaxWidth)
	//#endregion

	// 页面挂载事件
	onMounted(() => {
		// 通知electron允许窗体改变大小
		window.AIOSys.ipcRenderer.send('onWindowCanReSize', true)

		// 改变窗体大小，以正确显示内容
		window.AIOSys.ipcRenderer.send('onSetWindowSize', 1200, 800, null)
	})

	watch(isCollapse, (_nv) => {
		if (_nv) {
			SideWidth.value = SideMinWidth
		} else {
			SideWidth.value = SideMaxWidth
		}
	})
</script>
<template>
	<div>
		<div class="main CAN_DRAG NO_USER_SELECT">
			<div class="header CAN_DRAG">
				<Titlebar></Titlebar>
			</div>
			<el-container>
				<el-aside class="NO_DRAG" :width="SideWidth" style="height: calc(100vh - 60px)">
					<Menu style="height: calc(100vh - 60px)" v-model:isCollapse="isCollapse"></Menu>
				</el-aside>
				<el-main class="NO_DRAG" style="background-color: aquamarine">
					<div style="height: 100%">
						<router-view v-slot="{ Component }">
							<transition name="fade">
								<keep-alive>
									<component :is="Component" style="height: 100%" />
								</keep-alive>
							</transition>
						</router-view>
					</div>
				</el-main>
			</el-container>
		</div>
	</div>
</template>
<style scoped lang="css">
	.main {
		height: 100vh;
		width: 100vw;
		background-color: #47484c;
	}
	.header {
		width: 100vw;
		height: 60px;
		color: #fff;
	}
</style>
